<template>
	<div>
		<el-container>
			<el-header>文字参数设定</el-header>
			<el-main>
				<el-form :inline="true" :modal='fontparam'>
					<el-form-item label="字体名称">
						<el-select v-model="fontparam.fontName" filterable allow-create placeholder="请选择">
							<el-option v-for="item in systemfonts" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字体大小">
						<el-input v-model="fontparam.fontSize">
							<template slot="append">磅</template>
						</el-input>
					</el-form-item>
					<el-form-item label="字体样式">
						<el-select v-model="fontparam.fontStyle" filterable placeholder="请选择">
							<el-option v-for="item in fontstyles" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="旋转角度">
						<el-input v-model="fontparam.degree">
							<template slot="append">度</template>
						</el-input>
					</el-form-item>
					<el-form-item label="字体颜色">
						<el-color-picker v-model="fontparam.color" show-alpha :predefine="predefineColors" @change="showFontBackgroundcolor"></el-color-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click='submitFontParam'>设定字体</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="text" @click='showFont'>水印示例</el-button>
					</el-form-item>
				</el-form>
				<el-dialog title="水印字体示例" :visible.sync="dialogVisible" width="30%">
					<span :style="fontcss">水印字体</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">关闭</el-button>
					</span>
				</el-dialog>
			</el-main>
		</el-container>
		<ImageUpload></ImageUpload>
	</div>
</template>

<script>
	import qs from "qs"
	import ImageUpload from '@/components/ImageUpload.vue'
	export default {
		name: "WordMark",
		components: {
			ImageUpload
		},
		data: function() {
			return {
				dialogVisible: false,
				systemfonts: [],
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585'
				],
				fontstyles: [{
						value: 0,
						label: '普通'
					},
					{
						value: 1,
						label: '粗体'
					},
					{
						value: 2,
						label: '斜体'
					}
				],
				fontparam: {
					fontName: '',
					fontSize: 0,
					fontStyle: 0,
					degree: 45,
					alpha: 1.0,
					color: 'rgba(255,255,255,1)'
				},
				fontcss: {
					"font-family":"宋体",
					"font-size": "14px",
					"color": "rgba(0,0,0,1)",
					"font-style": "normal",
					"font-weight": "normal",
					"transform": "rotate(0deg)",
					"display": "block",
					"margin": "6% auto",
					"width": "60px",
					"background-color": "rgba(255,255,255,0)"
				},
				blackBackgroundcolor: false
			};
		},
		created: function() {
			this.getSystemFont();
			this.getCurrentFontParam();
		},
		methods: {
			getSystemFont() {
				this.axios.get('/font/systemfont').then(response => {
					let data = response.data;
					if (data.code == 1) {
						this.$message.error(data.msg);
					} else {
						this.systemfonts = data.data;
					}
				});
			},
			getCurrentFontParam() {
				this.axios.get('/font/param').then(response => {
					this.$options.methods.setFontParam(response, this, false);
				});
			},
			setFontParam(response, obj, notice) {
				let data = response.data;
				if (data.code == 1) {
					obj.$message.error(data.msg);
				} else {
					obj.fontparam.fontName = data.data.fontName;
					obj.fontparam.fontSize = data.data.fontSize;
					obj.fontparam.fontStyle = data.data.fontStyle;
					obj.fontparam.color = "rgba(" + data.data.color + "," + data.data.alpha + ")";
					obj.fontparam.degree = data.data.degree;
					obj.fontparam.alpha = data.data.alpha;
					if (notice) {
						obj.$message.success(data.msg);
					}
				}
			},
			submitFontParam() {
				let data = this.fontparam;
				let tempcolor = data.color.substring(5, data.color.length - 1);
				let temparr = tempcolor.split(",");
				data.color = temparr[0] + "," + temparr[1] + "," + temparr[2];
				data.alpha = parseFloat(temparr[3]);
				this.axios.post('/font/set', qs.stringify({...data})).then(response => {
					this.$options.methods.setFontParam(response, this, true);
				});
			},
			showFontBackgroundcolor() {
				let colordata = this.fontparam.color;
				let tempcolor = colordata.substring(5, colordata.lastIndexOf(","));
				let tempcolorarr = tempcolor.split(",");
				tempcolorarr.forEach(element => {
					element = parseInt(element);
					if(element <= 255 && element >= 230){
						this.blackBackgroundcolor = true;
						return false;
					} else {
						this.blackBackgroundcolor = false;
					}
				});
			},
			showFont() {
				this.dialogVisible = true;
				this.fontcss.fontFamily = this.fontparam.fontName;
				this.fontcss.fontSize = parseInt(this.fontparam.fontSize*4/3)+"px";
				this.fontcss.color = this.fontparam.color;
				this.fontcss.transform = "rotate(" + this.fontparam.degree + "deg)";
				this.fontcss.width = (parseInt(this.fontparam.fontSize*4/3)*4 + 4) +"px";
				if(this.blackBackgroundcolor){
					this.fontcss.backgroundColor = "rgba(0, 0, 0, 1)";
				}else{
					this.fontcss.backgroundColor = "rgba(255, 255, 255, 1)";
				}
				switch (this.fontparam.fontStyle){
					case 1:
						this.fontcss.fontStyle = "normal";
						this.fontcss.fontWeight = "bold";
						break;
					case 2:
						this.fontcss.fontStyle = "italic";
						this.fontcss.fontWeight = "normal";
						break;
					case 0:
					default:
						this.fontcss.fontStyle = "normal";
						this.fontcss.fontWeight = "normal";
						break;
				}
			}
		}
	}
</script>

<style scoped>

</style>
